<template>
  <a-modal
    ref="modalRef"
    v-model:visible="visible"
    :wrap-style="{ overflow: 'hidden' }"
    @ok="handleOk"
    cancelText="取消"
    okText="完成"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <template #title>
      <div ref="modalTitleRef" style="width: 100%; cursor: move"> {{ props.modalTitleText }} </div>
    </template>
    <template #modalRender="{ originVNode }">
      <div :style="transformStyle">
        <component :is="originVNode" />
      </div>
    </template>
    <slot name="container"></slot>
  </a-modal>
</template>

<script setup lang="ts">
  import { useDraggable } from '@vueuse/core';
  import { CSSProperties } from 'vue';
  const props = defineProps({
    visible: {
      type: Boolean,
    },
    modalTitleText: {
      type: String,
    },
  });
  const emits = defineEmits(['handleOk', 'update:visible']);

  // 控制显示
  let visible = computed({
    get() {
      return props.visible;
    },
    set() {
      emits('update:visible', false);
    },
  });
  const modalTitleRef = ref<HTMLElement | null>(null);
  // 拖拽
  const { x, y, isDragging } = useDraggable(modalTitleRef);
  const startX = ref<number>(0);
  const startY = ref<number>(0);
  const startedDrag = ref(false);
  const transformX = ref(0);
  const transformY = ref(0);
  const preTransformX = ref(0);
  const preTransformY = ref(0);
  const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
  watch([x, y], () => {
    if (!startedDrag.value) {
      startX.value = x.value;
      startY.value = y.value;
      const bodyRect = document.body.getBoundingClientRect();
      const titleRect = modalTitleRef.value!.getBoundingClientRect();
      dragRect.value.right = bodyRect.width - titleRect.width;
      dragRect.value.bottom = bodyRect.height - titleRect.height;
      preTransformX.value = transformX.value;
      preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
  });
  watch(isDragging, () => {
    if (!isDragging) {
      startedDrag.value = false;
    }
  });
  watchEffect(() => {
    if (startedDrag.value) {
      transformX.value =
        preTransformX.value +
        Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
        startX.value;
      transformY.value =
        preTransformY.value +
        Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
        startY.value;
    }
  });
  // css元素
  const transformStyle = computed<CSSProperties>(() => {
    return {
      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
  });
  // 点击确定
  const handleOk = () => {
    emits('handleOk');
  };
  // 关闭
  const handleCancel = () => {
    emits('update:visible', false);
  };
</script>

<style scoped>
  :deep(.ant-modal-header) {
    @apply dark:(bg-[#0f0f0f] border-dark-100);
  }
  :deep(.ant-modal-header div) {
    @apply dark:(text-light-50 );
  }
  :deep(.anticon-close) {
    @apply dark:(text-light-50 );
  }
  :deep(.ant-modal-content) {
    @apply dark:(bg-[#0f0f0f] text-light-50);
  }
  :deep(.ant-modal-footer) {
    @apply dark:border-dark-100;
  }
  :deep(.ant-switch) {
    @apply dark:bg-dark-50;
  }
  :deep(.ant-switch-checked) {
    @apply dark:bg-blue-800;
  }
  :deep(.ant-input) {
    @apply dark:(bg-[#1d1d1d] text-light-900 border-dark-50);
  }
  :deep(.ant-select-selector) {
    @apply dark:(bg-[#1d1d1d] text-light-900 border-dark-50) !important;
  }
  :deep(.ant-select-arrow) {
    @apply dark:text-light-900;
  }
  :deep(.ant-checkbox-group-item) {
    @apply dark:text-light-900;
  }
  :deep(.ant-radio-wrapper) {
    @apply dark:text-light-900;
  }
  :deep(.ant-btn) {
    @apply dark:(bg-[#1d1d1d] text-light-900 border-dark-50);
  }
</style>
